﻿@{
    ViewBag.Title = "With2";
}


<form data-bind="submit: getTweets">
Twitter account: 
     <input data-bind="value: twitterName" />
<button type="submit">Get tweets</button>
</form>

<div data-bind="with: resultData">
    <h3>Recent tweets fetched at <span data-bind="text: retrievalDate"></span></h3>
    <ol data-bind="foreach: topTweets">
        <li data-bind="text: text"></li>
    </ol>

    <button data-bind="click: $parent.clearResults">Clear tweets</button>
</div>

<script type="text/javascript">
    function AppViewModel() {
        var self = this;
        self.twitterName = ko.observable('2015-01-01');
         self.resultData = ko.observable(); // No initial value 

         self.getTweets = function () {
             twitterApi.getTweetsForUser(self.twitterName(), function (data) {
                 self.resultData({
                     retrievalDate: new Date(),
                     topTweets: data.slice(0, 5)
                 });
             });
         }

         self.clearResults = function () {
             self.resultData(undefined);
         }
     }

     ko.applyBindings(new AppViewModel());
</script>
